<template>
  <div class="dash-board">
    <el-row :gutter="10">
      <el-col :span="7">
        <KiCard>
          <template #title>
            分类商品数量(饼图)
          </template>
          <template #content>
            <EchartsPie :data="pieData"/>
          </template>
        </KiCard>
      </el-col>
      <el-col :span="10">
        <KiCard>
          <template #title>
            不同城市商品销量
          </template>
          <template #content>
            <EchartsMap :data="mapData"/>
          </template>
        </KiCard>
      </el-col>
      <el-col :span="7">
        <KiCard>
          <template #title>
            分类商品数量(玫瑰图)
          </template>
          <template #content>
            <EchartsRose :data="roseData"/>
          </template>
        </KiCard>
      </el-col>
    </el-row>
    <el-row :gutter="5" class="row2">
      <el-col :span="12">
        <KiCard>
          <template #title>
            分类商品的销量
          </template>
          <template #content>
            <EchartsLine :data="lineData"/>
          </template>
        </KiCard>
      </el-col>
      <el-col :span="12">
        <KiCard>
          <template #title>
            分类商品的收藏
          </template>
          <template #content>
            <EchartsBar :data="barData"/>
          </template>
        </KiCard>
      </el-col>
    </el-row>
  </div> 
</template>

<script setup lang="ts">
import { computed } from 'vue';

import KiCard from '@/components/ki-card/KiCard.vue'
import EchartsBar from '@/components/echarts-bar/EchartsBar.vue';
import EchartsLine from '@/components/echarts-line/EchartsLine.vue';
import EchartsMap from '@/components/echarts-map/EchartsMap.vue';
import EchartsPie from '@/components/echarts-pie/EchartsPie.vue';
import EchartsRose from '@/components/echarts-rose/EchartsRose.vue';
import {useEchartsStore} from '@/store'
const echartsStore = useEchartsStore()
echartsStore.getEchartsData()

const pieData = computed(() => {
  return echartsStore.categoryWithCount.map((item:any) => {
    return {
      value:item.goodsCount,
      name:item.name
    }
  })
})
const mapData = computed(() => {
  return echartsStore.addressWithSale.map((item: any) => {
    return {
      name: item.address,
      value: item.count
    }
  })
})
const roseData = computed(() => {
  return echartsStore.categoryWithCount.map((item:any) => {
    return {
      value:item.goodsCount,
      name:item.name
    }
  })
})
const lineData = computed(() => {
  const xData:any = []
  const yData:any = []
  echartsStore.categoryWithSale.forEach((item:any) => {
    xData.push(item.name)
    yData.push(item.goodsCount)
  })
  return {
    xData,
    yData
  }
})
const barData = computed(() => {
  return {
      xData: echartsStore.categoryWithFavor.map(
        (item: any) => item.name
      ),
      yData: echartsStore.categoryWithFavor.map(
        (item: any) => item.goodsFavor
      )
    }
})
</script>

<style scoped>
.row2{
  margin-top: 30px;
}
</style>